<template>
  <el-dialog
    :title="titles"
    :visible.sync="dialogVisible"
    width="80%"
    append-to-body
    :before-close="handleClose"
  >
    <div>
      <el-table
        v-loading="loading"
        :data="deptList"
        row-key="deptId"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="elcId" label="手台终端号" width="90">
          <template slot-scope="scope">
            <el-link type="primary" @click="sosuo(scope.row)">{{
              scope.row.elcId
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="elcName" label="手台名称"></el-table-column>

        <el-table-column prop="isOnline" label="终端是否在线" width="100">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.pc_is_online"
              :value="scope.row.isOnline"
            />
          </template>
        </el-table-column>
        <el-table-column prop="gisIsOnline" label="GIS状态" width="80">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.gis_is_online"
              :value="scope.row.gisIsOnline"
            />
          </template>
        </el-table-column>

        <el-table-column prop="esn" label="ESN" width="270"> </el-table-column>
        <el-table-column
          label="交流时间"
          align="center"
          prop="elcChatTime"
          width="180"
        >
          <template slot-scope="scope">
            <span>
              {{ formatTime(scope.row.elcChatTime) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="在线时长"
          align="center"
          prop="elcOnlineTime"
          width="180"
        >
          <template slot-scope="scope">
            {{ formatTime(scope.row.elcOnlineTime) }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="设备所在组"
          align="center"
          prop="createTime"
          width="350"
        >
          <template slot-scope="scope">
            <div class="box_tab">
              <div
                class="tabdics"
                v-for="(item, index) in scope.row.groupVos"
                :key="index"
              >
                <el-tag class="tabvos" :type="tabtype[item.groupId]">{{
                  item.groupName
                }}</el-tag>
              </div>
            </div>
          </template>
        </el-table-column> -->

        <el-table-column label="标签" align="center" prop="remark">
          <template slot-scope="scope">
            <span>
              <dict-tag
                :options="dict.type.pc_elc_status"
                :value="scope.row.status"
              />
            </span>
          </template>
        </el-table-column>

        <el-table-column label="备注" align="center" prop="remark">
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </div>
    <Diloagexiangqin ref="diloagexiangqin" />
  </el-dialog>
</template>

<script>
import {
  listelc,
  onlineAndChatZeroElcCount,
  elcIsOnlineCounts,
  GisIsOnline,
  elcIsNotOnlineCounts,
  GisIsNotOnline,
  getGroupElcCountsbox,
  getStatusElcListboxs,
  elcOnlineTimeSumByTimebox
} from "@/api/system/screen";
import moment from "moment";
import Diloagexiangqin from "../../headpaifond/diloge";

export default {
  dicts: ["pc_is_online", "pc_elc_status", "gis_is_online"],
  components: { Diloagexiangqin },

  data() {
    return {
      moment,
      tabtype: ["warning", "danger", "success", "warning", "info", "success"],

      dialogVisible: false,
      titles: "事件概况",
      queryParams: { pageNum: 1, pageSize: 10 },
      deptList: [],
      type: "",
      total: 0,
      loading: false,
      zvalue: undefined,
      zname: undefined,
    };
  },
  methods: {
    showdialog(type, zvalue, zname) {
      this.dialogVisible = true;
      this.type = type;
      this.queryParams.pageNum = 1;
      this.zvalue = zvalue;
      this.zname = zname;

      this.getList();
    },
    sosuo(item) {
      this.$refs.diloagexiangqin.showmode(item);
    },
    getList() {
      if (this.type == "zongshu") {
        this.listelc();
        this.titles = "事件概况-设备总数";
      } else if (this.type == "onlineAndChatZeroElcCount") {
        this.titles = "事件概况-在线无交流";
        this.onlineAndChatZeroElcCount();
      } else if (this.type == "elcIsOnlineCounts") {
        this.titles = "事件概况-终端在线";
        this.elcIsOnlineCounts();
      } else if (this.type == "GisIsOnline") {
        this.titles = "事件概况-GIS在线";
        this.gisIsOnline();
      } else if (this.type == "elcIsNotOnlineCounts") {
        this.titles = "事件概况-终端离线";
        this.elcIsNotOnlineCounts();
      } else if (this.type == "GisIsNotOnline") {
        this.gisIsNotOnline();
        this.titles = "事件概况-GIS离线";
      } else if (this.type == "zushebei") {
        this.zsheb();
        this.titles = "组设备统计-" + this.zname;
      } else if (this.type == "zubiaoqian") {
        this.zbiaoqian();
        this.titles = "标签设备统计-" + this.zname;
      }else if(this.type == 'timerbox'){
        this.timebox()
        this.titles = "在线统计 -" + this.zname;

      }
    },
    timebox(){
      elcOnlineTimeSumByTimebox(this.zvalue, this.queryParams).then((response)=>{
        this.deptList = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    },
    zbiaoqian() {
      getStatusElcListboxs(this.zvalue, this.queryParams).then((response) => {
        this.deptList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    zsheb() {
      getGroupElcCountsbox(this.zvalue, this.queryParams).then((response) => {
        this.deptList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    formatTime(timestamp) {
      const duration = moment.duration(timestamp, "seconds");
      const hours = Math.floor(duration.asHours());
      const minutes = Math.floor(duration.minutes());
      const remainingSeconds = duration.seconds();
      return `${hours} 小时 ${minutes} 分钟${remainingSeconds} 秒`;
    },
    // 查询设备总数
    listelc() {
      this.loading = true;
      listelc(this.queryParams).then((response) => {
        this.deptList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    onlineAndChatZeroElcCount() {
      this.loading = true;
      onlineAndChatZeroElcCount(this.queryParams).then((response) => {
        this.deptList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    elcIsOnlineCounts() {
      this.loading = true;
      elcIsOnlineCounts(this.queryParams).then((response) => {
        this.deptList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    gisIsOnline() {
      this.loading = true;
      GisIsOnline(this.queryParams).then((response) => {
        this.deptList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    elcIsNotOnlineCounts() {
      this.loading = true;
      elcIsNotOnlineCounts(this.queryParams).then((response) => {
        this.deptList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    gisIsNotOnline() {
      this.loading = true;
      GisIsNotOnline(this.queryParams).then((response) => {
        this.deptList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.deptList = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.minselect {
  width: 100px;
}
.box_tab {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.tabvos {
  margin: 5px;
}
</style>